
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>集成echarts实现迁徙图特效 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="shi-xian-dian-ju-he-xiao-guo.html" />
    
    
    <link rel="prev" href="mo-ni-dian-yun-dong-tu-ceng.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    简介页
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="./">
            
                <a href="./">
            
                    
                    ArcGIS API for JavaScript4.x
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="xue-xi-he-kai-fa-ji-qiao.html">
            
                <a href="xue-xi-he-kai-fa-ji-qiao.html">
            
                    
                    学习技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="kai-fa-ji-qiao.html">
            
                <a href="kai-fa-ji-qiao.html">
            
                    
                    开发技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="mapimagelayer.html">
            
                <a href="mapimagelayer.html">
            
                    
                    MapImageLayer
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="featurelayer.html">
            
                <a href="featurelayer.html">
            
                    
                    FeatureLayer
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="graphiclayer.html">
            
                <a href="graphiclayer.html">
            
                    
                    GraphicLayer
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="renderer.html">
            
                <a href="renderer.html">
            
                    
                    Renderer
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.7" data-path="symbol.html">
            
                <a href="symbol.html">
            
                    
                    2DSymbol
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.8" data-path="di-tu-shi-jian.html">
            
                <a href="di-tu-shi-jian.html">
            
                    
                    地图事件之地图状态监听
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.9" data-path="di-tu-shi-jian-zhi-dian-ji.html">
            
                <a href="di-tu-shi-jian-zhi-dian-ji.html">
            
                    
                    地图事件之点击
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.10" data-path="mo-ni-dian-yun-dong-tu-ceng.html">
            
                <a href="mo-ni-dian-yun-dong-tu-ceng.html">
            
                    
                    模拟点运动图层
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.2.11" data-path="untitled.html">
            
                <a href="untitled.html">
            
                    
                    集成echarts实现迁徙图特效
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.12" data-path="shi-xian-dian-ju-he-xiao-guo.html">
            
                <a href="shi-xian-dian-ju-he-xiao-guo.html">
            
                    
                    实现点聚合效果
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../arcgis-api-for-javascript3.x.html">
            
                <a href="../arcgis-api-for-javascript3.x.html">
            
                    
                    ArcGIS API for JavaScript3.x
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../vue.html">
            
                <a href="../vue.html">
            
                    
                    VUE
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../docker/">
            
                <a href="../docker/">
            
                    
                    Docker
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../docker/docker-shi-yong-nginx-dai-li-zhuan-fa-ssr.html">
            
                <a href="../docker/docker-shi-yong-nginx-dai-li-zhuan-fa-ssr.html">
            
                    
                    Docker使用Nginx代理转发SSR
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../docker/docker-da-jian-ge-ren-wordpress-wang-zhan.html">
            
                <a href="../docker/docker-da-jian-ge-ren-wordpress-wang-zhan.html">
            
                    
                    Docker搭建个人wordpress网站
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../docker/docker-an-zhuang.html">
            
                <a href="../docker/docker-an-zhuang.html">
            
                    
                    Docker安装
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../nginx.html">
            
                <a href="../nginx.html">
            
                    
                    Nginx
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../untitled.html">
            
                <a href="../untitled.html">
            
                    
                    小技巧
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../ci-cd.html">
            
                <a href="../ci-cd.html">
            
                    
                    CI/CD
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >集成echarts实现迁徙图特效</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#x96C6;&#x6210;echarts&#x5B9E;&#x73B0;&#x8FC1;&#x5F99;&#x56FE;&#x7279;&#x6548;">&#x96C6;&#x6210;echarts&#x5B9E;&#x73B0;&#x8FC1;&#x5F99;&#x56FE;&#x7279;&#x6548;</h1>
<p>Arcgis api for js&#x4E2D;&#x4F7F;&#x7528;echart&#x662F;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x5750;&#x6807;&#x6620;&#x5C04;js&#xFF0C;&#x6587;&#x4EF6;&#x5728;&#x6587;&#x672B;&#xFF1A;&#x53EF;&#x6839;&#x636E;&#x9700;&#x6C42;&#x4FEE;&#x6539;</p>
<p>&#x5728;Arcgis&#x4E2D;&#x6CE8;&#x5165;js&#xFF0C;</p>
<pre><code class="lang-text">esriLoader
        .loadModules([
          &quot;./static/assets/echarts/4EchartsLayer.js&quot;,
          &quot;dojo/domReady!&quot;
        ])
        .then(([echartsLayer]) =&gt; {
          echartlayer = new echartsLayer(view, echarts, option);
        })
        .catch(err =&gt; {
          // handle any errors
          console.error(err);
        });
</code></pre>
<p>&#x6CE8;&#x610F;&#x5728;option.series[index].coordinateSystem&#x8BBE;&#x7F6E;&#x5750;&#x6807;&#x7CFB;&#x4E3A;&quot;arcgis&quot;&#xFF0C;&#x4E4B;&#x540E;&#x53EF;&#x4EE5;&#x53BB;echarts&#x5B98;&#x7F51;&#x4E0B;&#x8F7D;&#x6A21;&#x677F;&#xFF0C;&#x7EC4;&#x88C5;&#x6570;&#x636E;&#x5373;&#x53EF;&#x5B9E;&#x73B0;</p>
<pre><code class="lang-text">define([&quot;dojo/_base/declare&quot;, &quot;dojo/_base/lang&quot;, &quot;esri/geometry/Point&quot;, &quot;esri/geometry/SpatialReference&quot;],
  function (declare, lang, n, SpatialReference) {
    return declare(&quot;EchartsLayer&quot;, null, {
      name: &quot;EchartsLayer&quot;,
      view: null,
      box: null,
      chart: null,
      chartOption: null,
      visible: true,
      echartsLib: null,
      constructor: function (view, echarts, option) {
        this.echartsLib = echarts;
        if (option.series) {
          option.series.forEach(element =&gt; {
            if (element.type === &apos;heatmap&apos; &amp;&amp; element.coordinateSystem === &apos;arcgis_geo&apos;) {
              this.echartsLib.registerCoordinateSystem(&apos;arcgis_geo&apos;, this.getGeoCoordinateSystem(view, echarts));
            } else {
              this.echartsLib.registerCoordinateSystem(&apos;arcgis&apos;, this.getE3CoordinateSystem(view, echarts));
            }
          })
        }

        if (option.baseOption) {
          option.baseOption.series.forEach(element =&gt; {
            if (element.type === &apos;heatmap&apos; &amp;&amp; element.coordinateSystem === &apos;arcgis_geo&apos;) {
              this.echartsLib.registerCoordinateSystem(&apos;arcgis_geo&apos;, this.getGeoCoordinateSystem(view, echarts));
            } else {
              this.echartsLib.registerCoordinateSystem(&apos;arcgis&apos;, this.getE3CoordinateSystem(view, echarts));
            }
          })
        }

        this.init(view, option);
      },
      init: function (view, option) {
        this.setBaseMap(view);
        this.createLayer();
        option &amp;&amp; this.setChartOption(option);

      },
      setBaseMap: function (view) {
        this.view = view;
      },
      setChartOption: function (option) {
        this.chartOption = option;
        this.setCharts();
      },
      setVisible: function (bool) {
        if (!this.box || this.visible === bool) return;
        this.box.hidden = !bool;
        this.visible = bool;
        bool === true &amp;&amp; setCharts();
      },
      refreshBegin: function () {
        this.box.hidden = true;
      },
      refreshing: function () {
        setCharts();
      },
      refreshEnd: function () {
        this.box.hidden = false;
      },
      on: function (eventName, handler, context) {
        this.chart.on(eventName, handler, context);
      },
      off: function (eventName, handler, context) {
        this.chart.off(eventName, handler, context);
      },
      map_DragStart_Listener: null,
      map_DragEnd_Listener: null,
      map_ZoomStart_Listener: null,
      map_ZoomEnd_Listener: null,
      map_ExtentChange_Listener: null,
      map_click_Listener: null,
      setCharts: function () {
        if (!this.visible) return;
        if (this.chartOption == null || this.chartOption == &apos;undefined&apos;) return;
        let baseExtent = this.view.extent;
        //&#x5224;&#x65AD;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x4E86;mark&#x7C7B;&#x578B;&#x6807;&#x7B7E;&#xFF0C;&#x6BCF;&#x6B21;&#x91CD;&#x7ED8;&#x8981;&#x91CD;&#x65B0;&#x8F6C;&#x6362;&#x5730;&#x7406;&#x5750;&#x6807;&#x5230;&#x5C4F;&#x5E55;&#x5750;&#x6807;
        //&#x6839;&#x636E;&#x5730;&#x56FE;extent,&#x91CD;&#x7ED8;echarts
        this.chartOption.xAxis = { show: false, splitLine: {show: false}, min: baseExtent.xmin, max: baseExtent.xmax };
        this.chartOption.yAxis = { show: false, splitLine: {show: false}, min: baseExtent.ymin, max: baseExtent.ymax };
        this.chart.setOption(this.chartOption);
        this.chartOption.animation = false;
      },
      /*&#x521B;&#x5EFA;layer&#x7684;&#x5BB9;&#x5668;&#xFF0C;&#x6DFB;&#x52A0;&#x5230;map&#x7684;layers&#x4E0B;&#x9762;*/
      createLayer: function () {
        let box = this.box = document.createElement(&quot;div&quot;);
        box.id = &quot;echarts-div&quot;
        box.style.width = this.view.width + &apos;px&apos;;
        box.style.height = this.view.height + &apos;px&apos;;
        box.style.position = &quot;absolute&quot;;
        box.style.top = 0;
        box.style.left = 0;
        const parent = this.view.container.getElementsByClassName(&quot;esri-view-surface&quot;)[0];
        parent.appendChild(box);
        this.chart = this.echartsLib.init(box);
        this.startMapEventListeners();
      },
      /*&#x9500;&#x6BC1;&#x5B9E;&#x4F8B;*/
      removeLayer: function () {
        this.box.outerHTML = &quot;&quot;;
        this.view = null;
        this.box = null;
        this.originLyr = null;
        this.features = null;
        this.screenData = [];
        this.chart = null;
        this.chartOption = null;
        this.map_DragStart_Listener.remove();
        this.map_DragEnd_Listener.remove();
        this.map_ZoomStart_Listener.remove();
        this.map_ZoomEnd_Listener.remove();
        this.map_ExtentChange_Listener.remove();
      },
      /*&#x76D1;&#x542C;&#x5730;&#x56FE;&#x4E8B;&#x4EF6;&#xFF0C;&#x6839;&#x636E;&#x56FE;&#x5C42;&#x662F;&#x5426;&#x663E;&#x793A;&#xFF0C;&#x5224;&#x65AD;&#x662F;&#x5426;&#x91CD;&#x7ED8;echarts*/
      startMapEventListeners: function () {
        let view = this.view;
        view.watch(&quot;extent&quot;, lang.hitch(this, function () {
          if (!this.visible) return;
          this.setCharts();
          this.chart.resize();
          this.box.hidden = false;
        }));
        view.watch(&quot;rotation&quot;, lang.hitch(this, function () {
          if (!this.visible) return;
          this.setCharts();
          this.chart.resize();
          this.box.hidden = false;
        }));
        function cloneEvent(e) {
          if (e===undefined || e===null) return undefined;
          function ClonedEvent() {};  
          let clone=new MouseEvent(&apos;click&apos;);
          for (let p in e) {
            let d=Object.getOwnPropertyDescriptor(e, p);
            if (d &amp;&amp; (d.get || d.set)) Object.defineProperty(clone, p, d); else clone[p] = e[p];
          }
          Object.setPrototypeOf(clone, e);
          return clone;
        }
        view.on(&apos;click&apos;, lang.hitch(this, function (e) {
          const old = e.native
          let evt = new MouseEvent(&apos;click&apos;, {
            altKey: old.altKey,
            button: old.button,
            buttons: old.buttons,
            clientX: old.clientX,
            clientY: old.clientY,
            ctrlKey: old.ctrlKey,
            metaKey: old.metaKey,
            movementX: old.movementX,
            movementY: old.movementY,
            offsetX: old.offsetX,
            offsetY: old.offsetY,
            pageX: old.pageX,
            pageY: old.pageY,
            region: old.region,
            screenX: old.screenX,
            screenY: old.screenY,
            shiftKey: old.shiftKey,
            which: old.which,
            x: old.x, 
            y: old.y,
          })
          this.chart.getDom().getElementsByTagName(&apos;div&apos;)[0].dispatchEvent(evt)
        }))

      },
      getE3CoordinateSystem: function (map, echarts) {
        var CoordSystem = function CoordSystem(map) {
          this.map = map;
          this._mapOffset = [0, 0];
        };
        CoordSystem.create = function (ecModel) {
          ecModel.eachSeries(function (seriesModel) {
            if (seriesModel.get(&apos;coordinateSystem&apos;) === &apos;arcgis&apos;) {
              seriesModel.coordinateSystem = new CoordSystem(map);
            }
          });
        };
        CoordSystem.getDimensionsInfo = function () {
          return [&apos;x&apos;, &apos;y&apos;];
        };
        CoordSystem.dimensions = [&apos;x&apos;, &apos;y&apos;];
        CoordSystem.prototype.dimensions = [&apos;x&apos;, &apos;y&apos;];
        CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
          this._mapOffset = mapOffset;
        }
        CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
          var point = {
            type: &quot;point&quot;,
            x: data[0],
            y: data[1],
            spatialReference: new SpatialReference(4326)
          };
          var px = map.toScreen(point);
          var mapOffset = this._mapOffset;
          return [px.x - mapOffset[0], px.y - mapOffset[1]];
        }
        CoordSystem.prototype.pointToData = function pointToData(pt) {
          var mapOffset = this._mapOffset;
          var screentPoint = {
            x: pt[0] + mapOffset[0],
            y: pt[1] + mapOffset[1]
          };
          var data = map.toMap(screentPoint);
          return [data.x, data.y];
        };
        CoordSystem.prototype.getViewRect = function getViewRect() {
          return new echarts.graphic.BoundingRect(0, 0, this.map.width, this.map.height);
        };
        CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
          return echarts.matrix.create();
        };
        return CoordSystem
      },
      getGeoCoordinateSystem: function (map, echarts) {
        var CoordSystem = function CoordSystem(map) {
          this.map = map;
          this._mapOffset = [0, 0];
        };
        CoordSystem.create = function (ecModel) {
          ecModel.eachSeries(function (seriesModel) {
            if (seriesModel.get(&apos;coordinateSystem&apos;) === &apos;arcgis_geo&apos;) {
              seriesModel.coordinateSystem = new CoordSystem(map);
            }
          });
        };
        CoordSystem.getDimensionsInfo = function () {
          return [&apos;lng&apos;, &apos;lat&apos;];
        };
        CoordSystem.dimensions = [&apos;lng&apos;, &apos;lat&apos;];
        CoordSystem.prototype.dimensions = [&apos;lng&apos;, &apos;lat&apos;];
        CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
          this._mapOffset = mapOffset;
        }
        CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
          var point = {
            type: &quot;point&quot;,
            x: data[0],
            y: data[1],
            spatialReference: new SpatialReference(4326)
          };
          var px = map.toScreen(point);
          var mapOffset = this._mapOffset;
          return [px.x - mapOffset[0], px.y - mapOffset[1]];
        }
        CoordSystem.prototype.pointToData = function pointToData(pt) {
          var mapOffset = this._mapOffset;
          var screentPoint = {
            x: pt[0] + mapOffset[0],
            y: pt[1] + mapOffset[1]
          };
          var data = map.toMap(screentPoint);
          return [data.x, data.y];
        };
        CoordSystem.prototype.getViewRect = function getViewRect() {
          return new echarts.graphic.BoundingRect(0, 0, this.map.width, this.map.height);
        };
        CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
          return echarts.matrix.create();
        };
        return CoordSystem
      }

    });
  })
</code></pre>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="mo-ni-dian-yun-dong-tu-ceng.html" class="navigation navigation-prev " aria-label="Previous page: 模拟点运动图层">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="shi-xian-dian-ju-he-xiao-guo.html" class="navigation navigation-next " aria-label="Next page: 实现点聚合效果">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"集成echarts实现迁徙图特效","level":"1.2.11","depth":2,"next":{"title":"实现点聚合效果","level":"1.2.12","depth":2,"path":"arcgis-api-for-javascript4.x/shi-xian-dian-ju-he-xiao-guo.md","ref":"arcgis-api-for-javascript4.x/shi-xian-dian-ju-he-xiao-guo.md","articles":[]},"previous":{"title":"模拟点运动图层","level":"1.2.10","depth":2,"path":"arcgis-api-for-javascript4.x/mo-ni-dian-yun-dong-tu-ceng.md","ref":"arcgis-api-for-javascript4.x/mo-ni-dian-yun-dong-tu-ceng.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"arcgis-api-for-javascript4.x/untitled.md","mtime":"2019-09-27T03:24:31.190Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-09-30T03:42:42.849Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

